<script setup lang="ts">
import type { UploadProps } from 'element-plus'
import { ref } from 'vue'

const props = defineProps(['data'])

// const imageSrcList = props.data.baseData
const imageSrcList = props.data.fileData

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
// 改变动态数组的位置
import { useDymicComponentStore } from '@/stores/modudels/dymicComponent'
const dymicComponentStore = useDymicComponentStore()
//置顶
const topping = () => {
  dymicComponentStore.topping(props.data.order)
}
// 上移
const moveUp = () => {
  dymicComponentStore.moveUp(props.data.order)
  console.log(dymicComponentStore.displayContent)
}
// 下移
const moveDown = () => {
  dymicComponentStore.moveDown(props.data.order)
}
// 删除
const remove = () => {
  dymicComponentStore.remove(props.data.order)
}
</script>

<template>
  <div class="big_img_layout">
    <div class="header_layput">
      <span class="title">小图</span>
      <div class="button_layout">
        <el-button @click="topping">置顶</el-button>
        <el-button @click="moveUp">上移</el-button>
        <el-button @click="moveDown">下移</el-button>
        <el-button @click="remove">删除</el-button>
      </div>
    </div>

    <el-upload
      v-model:file-list="imageSrcList"
      action="http://localhost:8080/upload/uploadFiles"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      multiple
      :headers = "smallImageHeaders"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
    <!-- <el-image :src="data" fit="fill"></el-image> -->
  </div>
</template>

<style scoped>
.big_img_layout {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .header_layput {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 25px;
      margin-bottom: 10px;
    }
  }
}
</style>
